<template>
	<div class="canvasAction" :class="isHiden ? 'hide' : ''">
		<!-- 检索 -->
		<div class="canvasAction-search">
			<el-input placeholder="请输入关键词" v-model="searchValue" clearable>
				<i slot="prefix" class="el-input__icon el-icon-search"></i>
			</el-input>
		</div>
		<div class="canvasAction-content">
			<!-- 列表信息 -->
			<div class="canvasAction-content__list">
				<el-tree
					:data="treeData"
					ref="ruleTree"
					node-key="id"
					@node-click="handleNodeClick"
					:props="defaultProps"
				></el-tree>
			</div>
			<!-- 具体信息 -->
			<div class="canvasAction-content__detail" v-loading="loading" element-loading-background="#25262a">
				<component
					:is="'Card' + cardType"
					:cardData="cardData"
					:hasTool="hasTool"
					:total="total"
					@pageChange="pageChange"
				></component>
			</div>
		</div>
		<!-- 展示隐藏 -->
		<div class="canvasAction-hide">
			<i class="el-icon-d-arrow-left" :class="isHiden ? 'rotate' : ''" @click="toggleHidden"></i>
		</div>
	</div>
</template>

<script>
import { mapMutations } from 'vuex';
import CardOne from '@/components/cardlist/card-one';
import CardTwo from '@/components/cardlist/card-two';
import {
	queryTemplateTypeApi,
	queryTemplateByTypeApi,
	querySceneTypeApi,
	querySceneByTypeApi,
	queryModelTypeApi,
	queryModelByPidApi,
	queryJHTypeApi,
	queryJHByPidApi
} from '@/utils/api';

export default {
	name: 'CanvasAction',
	components: {
		CardOne /* 一行一个 */,
		CardTwo /* 一行两个 */
	},
	data() {
		return {
			loading: true /* 是否加载中 */,
			isHiden: false /* 是否隐藏面板 */,
			hasTool: false /* 是否存在工具栏 */,
			searchValue: '' /* 搜索内容 */,
			treeData: [] /* 树形数据 */,
			menuType: '' /* 选中菜单栏 */,
			searchInfo: {
				/* 两行列表的检索条件 */
				pageSize: 16,
				pageIndex: 1,
				id: ''
			},
			total: 0 /* 总数 */,
			defaultProps: {
				/* 树形展示字段名 */
				children: 'children',
				label: 'formworkType'
			},
			cardType: 'One' /* 卡片展示方式 */,
			cardData: [] /* 卡片数据 */
		};
	},
	created() {
		this.init();
	},
	methods: {
		...mapMutations('common', {
			setCurrentIndex: 'setCurrentIndex'
		}),

		// 初始化
		init() {
			// 监听菜单栏切换
			this.$EventBus.$on('toggleMenu', this.toggleMenu);
			this.$EventBus.$on('upLoadMyTemplate', this.queryTemplateByType);
		},

		// 菜单栏变化
		toggleMenu(type) {
			this.loading = true;
			this.menuType = type;
			this.hasTool = false;
			this.treeData = [];

			switch (type) {
				case '模板':
					this.setCurrentIndex(0);
					this.treeData = [
						{ formworkType: '我的模板', id: 'dsa48d4sa68f456f6sf' },
						{ formworkType: '官方模板', id: 'd48s48f484gdfd1g354' }
					];
					setTimeout(() => {
						this.$refs['ruleTree'].setCurrentKey(this.treeData[0].id);
						this.handleNodeClick(this.treeData[0]);
					}, 10);

					this.cardType = 'One';
					this.defaultProps.label = 'formworkType';
					break;
				case '场景':
					this.setCurrentIndex(1);
					this.querySceneType();
					this.cardType = 'One';
					this.defaultProps.label = 'sceneType';
					this.hasTool = true;
					break;
				case '模型':
					this.setCurrentIndex(2);
					this.queryModelType();
					this.cardType = 'Two';
					this.defaultProps.label = 'title';
					this.hasTool = true;
					break;
				case '交互':
					this.setCurrentIndex(3);
					this.queryActionType(); //使用接口时取消注释
					this.cardType = 'Two';
					this.defaultProps.label = 'title';
					this.hasTool = false;
					break;
				case '面板':
					this.setCurrentIndex(4);
					break;
			}
		},

		// 查询模板类型
		async queryTemplateType() {
			const res = await queryTemplateTypeApi();

			if (res.data) {
				this.treeData = res.data;
				this.$nextTick(() => {
					setTimeout(() => {
						if (this.treeData && this.treeData.length > 0) {
							this.$refs['ruleTree'].setCurrentKey(this.treeData[0].id);
							this.handleNodeClick(this.treeData[0]);
						}
					});
				});
			}
		},

		// 根据模板类型查询模板信息
		async queryTemplateByType() {
			!this.loading && (this.loading = true);

			const res = await queryTemplateByTypeApi({
				pageNum: 1,
				pageSize: 99
			});

			if (res.data) {
				this.loading = false;
				this.cardData = res.data;
			}
		},

		// 查询场景类型
		async querySceneType() {
			const res = await querySceneTypeApi();

			if (res.data) {
				this.treeData = res.data;

				this.$nextTick(() => {
					setTimeout(() => {
						if (this.treeData && this.treeData.length > 0) {
							this.$refs['ruleTree'].setCurrentKey(this.treeData[0].id);
							this.handleNodeClick(this.treeData[0]);
						}
					});
				});
			}
		},

		// 根据场景类型查询场景信息
		async querySceneByType(val) {
			!this.loading && (this.loading = true);

			const res = await querySceneByTypeApi({
				sceneType: val
			});

			if (res.data) {
				this.loading = false;
				this.cardData = res.data;
			}
		},

		// 查询模型类型
		async queryModelType() {
			const res = await queryModelTypeApi();

			if (res.data) {
				res.data.map((item) => {
					if (item.parentId === '0') {
						this.treeData.push(item);
					}
				});

				this.$nextTick(() => {
					setTimeout(() => {
						if (this.treeData && this.treeData.length > 0) {
							this.$refs['ruleTree'].setCurrentKey(this.treeData[0].id);
							this.handleNodeClick(this.treeData[0]);
						}
					});
				});
			}
		},

		// 根据场景类型查询场景信息
		async queryModelByPid(val) {
			!this.loading && (this.loading = true);

			const res = await queryModelByPidApi(this.searchInfo);

			if (res.data) {
				this.loading = false;
				this.total = Number(res.count);
				this.cardData = res.data;

				this.cardData.map((item, index) => {
					if (!item.parentId) {
						this.cardData.splice(index, 1);
					}
				});
			}
		},

		// 查询交互类型
		async queryActionType() {
			const res = await queryJHTypeApi();

			if (res.data) {
				this.treeData = [];

				res.data.map((item) => {
					if (item.parentId === '0') {
						this.treeData.push(item);
					}
				});

				this.$nextTick(() => {
					setTimeout(() => {
						if (this.treeData && this.treeData.length > 0) {
							this.$refs['ruleTree'].setCurrentKey(this.treeData[0].id);
							this.handleNodeClick(this.treeData[0]);
						}
					});
				});
			}
		},

		// 根据场景类型查询场景信息
		async queryActionByPid() {
			!this.loading && (this.loading = true);

			const res = await queryJHByPidApi(this.searchInfo);

			if (res.data) {
				this.loading = false;
				this.total = Number(res.count);
				this.cardData = res.data;

				this.cardData.map((item, index) => {
					if (item.parentId == '0' || !item.parentId) {
						this.cardData.splice(index, 1);
					}
				});
			}
		},

		// 点击树形结构的节点
		handleNodeClick(val) {
			$ue4.endPoint();
			if (this.menuType === '模板') {
				if (val.formworkType == '我的模板') {
					this.queryTemplateByType();
				} else if (val.formworkType == '官方模板') {
					this.cardData = [];
				}
			} else if (this.menuType === '场景') {
				this.querySceneByType(val.sceneType);
			} else if (this.menuType === '模型') {
				this.searchInfo.id = val.id;
				this.queryModelByPid();
			} else if (this.menuType === '交互') {
				this.searchInfo.id = val.id;
				this.queryActionByPid(); //使用接口时取消注释
			}
		},

		// 两行卡片的分页
		pageChange(val) {
			this.searchInfo.pageIndex = val;
			this.queryModelByPid();
		},

		// 显示隐藏切换
		toggleHidden() {
			this.isHiden = !this.isHiden;
			this.$emit('hideCard', this.isHiden);
		}
	}
};
</script>

<style lang="scss">
.canvasAction {
	font-size: 14px;
	height: 100%;
	background-color: $--xy-color-deeper;
	position: absolute;
	transition: all 0.3s;
	width: 375px;
	border-right: $--xy-border-deep;
	z-index: 98;

	&.hide {
		transform: translateX(-375px);
	}

	.canvasAction-search {
		height: 60px;
		@include xy-dfc;
		overflow: hidden;
		border-bottom: $--xy-border-deep;
		padding: 0 15px;
		width: 100%;
	}

	.canvasAction-content {
		width: 100%;
		height: calc(100% - 60px);
		display: flex;

		&__list {
			padding: 15px 0;
			height: 100%;
			width: 120px;
			border-right: $--xy-border-deep;
			overflow-y: auto;
			@include xy-stopselect;
			@include xy-scroll;
		}

		&__detail {
			height: 100%;
			flex: 1;
		}
	}

	.canvasAction-hide {
		position: absolute;
		z-index: 98;
		top: 0;
		right: -33px;
		cursor: pointer;
		border-radius: 0 4px 4px 0;
		overflow: hidden;

		i {
			height: 28px;
			width: 32px;
			font-size: 20px;
			@include xy-dfc;
			color: $--xy-color-light;
			background-color: #262629;
		}

		.rotate {
			transform: rotate(180deg);
		}
	}

	.el-tree {
		background-color: transparent;
	}

	.el-tree-node__label {
		@include xy-overpoint;
		font-size: 13px;
		padding: 0 5px;
	}

	.el-tree-node__children {
		.el-tree-node__label {
			font-size: 12px;
		}

		.el-tree-node__content {
			color: #999;
			padding-left: 20px !important;
		}
	}

	.el-tree-node__expand-icon {
		padding: 6px 2px;
	}

	.el-tree-node__content {
		color: #999;
		box-sizing: content-box !important;
		padding: 5px 8px !important;

		&:hover {
			background-color: transparent;
			color: #f1f1f1 !important;
		}
	}

	.el-tree-node.is-current > .el-tree-node__content {
		background-color: #3c67ed !important;
		color: #f1f1f1 !important;
	}

	.el-tree-node:focus > .el-tree-node__content {
		background-color: transparent;
	}

	.el-loading-spinner {
		svg {
			circle {
				stroke: rgb(0, 126, 236);
			}
		}
	}
}
</style>
